<template>
	<div class="my">
		<header>
			<div class="my-bg">
				<img src="/images/mytopbg.png" alt="" />
			</div>
			<div class="login">
				<div class="actore">
					<img src="/images/avatar.png" alt="" />
					<div class="actore-name" @click="goLogin">登录/注册</div>
				</div>
				<img src="/images/mytoprember.png" alt="" />
			</div>
		</header>
		<section>
			<ul>
				<li>地址管理</li>
			</ul>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script setup>
	import Tabbar from '@/components/common/Tabbar.vue'
	import { useRouter } from 'vue-router'
	let router = useRouter()
	const goLogin = ()=>{
		router.push({path:'/login'})
	}
</script>

<style scoped>
	header{
		position: relative;
	}
	.my-bg img,
	.login img {
		width: 100%;
	}

	.login {
		width: 95%;
		position: absolute;
		top: 60px;
		left: 2.5%;
		background-color: white;
		border-radius: 5px;
		text-align: center;
	}

	.login .actore {
		position: relative;
	}
	.actore-name{
		font-size: 20px;
		font-weight: bold;
		margin: 40px 0 10px 0;
	}

	.login .actore img {
		width: 80px;
		position: absolute;
		top: -80px;
		left: 39%;
	}
	section {
	    margin-top: 80px; 
		font-size: 18px;
	}
</style>